<template>
  <div>
    <mt-swipe :auto="0" class="swipe-contain">
      <mt-swipe-item>
        <router-link to="/food" v-for="(item,index) in swiperList1" :key="index">
          <img :src="'//fuss10.elemecdn.com/'+item.image_hash.substr(0,1)+'/'+item.image_hash.substr(1,2)+'/'+item.image_hash.substr(3)+'.'+item.image_hash.substr(32,4)+'?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/'" alt="">
          <span>{{item.name}}</span>
        </router-link>
      </mt-swipe-item>
      <mt-swipe-item>
        <router-link to="/food" v-for="(item,index) in swiperList2" :key="index">
          <img :src="'//fuss10.elemecdn.com/'+item.image_hash.substr(0,1)+'/'+item.image_hash.substr(1,2)+'/'+item.image_hash.substr(3)+'.'+item.image_hash.substr(32,4)+'?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/'" alt="">
          <span>{{item.name}}</span>
        </router-link>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'swiper',
  computed: {
    ...mapState(['swiperList']),
    ...mapGetters(['swiperList1', 'swiperList2'])
  },
  methods: mapMutations({
    getData: 'GETSWIPERDATA'
  }),
  mounted: function () {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
.swipe-contain {
  width: 100%;
  height: px2rem(354);
  color: #000;
  background: #fff;
  .mint-swipe-item{
    a {
      display: block;
      display: flex;
      float: left;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 25%;
      height: px2rem(129);
      margin-top: px2rem(22);
      text-decoration: none;
      span {
        font-size: px2rem(24);
        color: #666;
        margin-top: px2rem(10);
      }
    }
  }
}
</style>


